﻿<template>
  <div class="errPage-container">
    <el-form ref="form" :model="form" label-width="150px" style="margin-top:30px;">
      <el-form-item label="实例名称">
        <el-input v-model="text" type="text" placeholder="请输入名称" maxlength="10" show-word-limit style="display: block; width:370px; margin-left: 70px" />
      </el-form-item>
      <el-form-item label="选择模型" style="margin-top: 80px">
        <el-select v-model="model" placeholder="请选择模型" style="display: block; width:370px; margin-left: 70px">
          <el-option label="LayoutLMv3" value="LayoutLMv3" />
          <el-option label="UIE-X" value="UIE-X" />
        </el-select>
      </el-form-item>
      <el-form-item label="添加数据集" style="margin-top: 80px">
        <!-- <el-input v-model="form.name"></el-input> -->
        <!-- <el-upload style="display: block; margin-left: 80px; text-align: left;" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange">
            <el-button size="small" type="primary" plain>点击上传</el-button>
          </el-upload> -->
        <el-select v-model="dataset" placeholder="请选择数据集" style="display: block; width:370px; margin-left: 70px">
          <el-option label="Dataset: 1" value="Dataset: 1" />
          <el-option label="FUNSD" value="FUNSD" />
          <el-option label="XFUND" value="XFUND" />
          <el-option label="CORD" value="CORD" />
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item> -->
      <el-form-item label="自定义测试集" style="margin-top: 80px">
        <el-switch
          v-model="definedTest"
          style="text-align: left; margin-left: 70px; display:block; margin-top: 8px;"
          @change="isDefinedData"
        />
        <el-upload
          v-if="isShow"
          style="display: block; margin-top:20px; margin-left: 70px;"
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  <style>
  .formStyle {
    width: 600px;
  }

  .elstyle {
    margin-left: 80px;
  }

  .btn {
    margin-top: 50px;
    margin-left: 170px;
  }
  </style>

<script>
export default {
  // props: {
  //   propBasicSet: {
  //     type: Array,
  //     default: function() {
  //       return [
  //         { title: 'test',
  //           model: 'LayoutLMv3',
  //           dataset: 'Dataset: 1',
  //           isDefinedTest: false }
  //       ]
  //     }
  //   }
  // },
  data() {
    return {
      text: '',
      model: '',
      dataset: '',
      definedTest: 0,
      isShow: false,
      form: {
        lr: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    isDefinedData() {
      this.isShow = !this.isShow
    },
    onSubmit() {
      const that = this
      this.$alert('保存成功！', '保存', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            duration: 1000,
            type: 'info',
            message: `已保存！`
          })
          setTimeout(() => {
            this.$router.push({
              path: '/training/professional',
              query: {
                title: that.text,
                model: that.model,
                dataset: that.dataset,
                isDefinedTest: that.isShow
              }
            }
            )
          }, 1500)
        }
      })
    }
  }
}
</script>
